<template>
  <div class="service-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane v-for="(item, index) in dataList" :key="index" :label="item.label" :name="item.status">
        <app-table
          :page-data="pageData"
          :table-columns="tableColumns"
          @current-change="handleCurrentChange"
          @handleCheckedRows="handleCheckedRows"
        >
          <template slot-scope="{row}">
            <el-button
              size="mini"
              type="success"
              @click="getDetailData(row)"
            >
              查看
            </el-button>
          </template>
        </app-table>
      </el-tab-pane>
    </el-tabs>
    <el-dialog
      title="订单详情"
      :visible.sync="dialogVisible"
      width="80%"
      :close-on-click-modal="false"
      class="dialogForm"
    >
      <div class="doorService-wrap">
        <el-row>
          <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
            <p>
              订单号
              <span>{{ dataform.assign_id }}</span>
            </p>
          </el-col>
          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
            <p>
              姓名
              <span>{{ dataform.name }}</span>
            </p>
          </el-col>
          <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
            <p>
              性别
              <span>{{ dataform.sex && getSexCon(dataform.sex) || "未知" }}</span>
            </p>
          </el-col>
          <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
            <p>
              年龄
              <span>{{ dataform.age }}</span>
            </p>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
            <p>
              家庭地址
              <span>{{ dataform.address }}</span>
            </p>
          </el-col>
          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
            <p>
              服务内容
              <span>{{ getServiceContentDetail(dataform.service_content) }}</span>
            </p>
          </el-col>
          <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
            <p>
              上门时间
              <span>{{ dataform.start_time && handcleTime(dataform.start_time) }}</span>
            </p>
          </el-col>
          <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
            <p>
              签退时间
              <span>{{ dataform.end_time && handcleTime(dataform.end_time) }}</span>
            </p>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
            <p>
              服务时长
              <span>{{ getDiffTime(dataform.end_time, dataform.start_time) }}</span>
            </p>
          </el-col>
          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
            <div>
              签到
              <img class="door-img" style="width: 30%;" :src="dataform.start_photo" alt="">
              <!-- <div class="door-img" :style="{backgroundImage: 'url('+ dataform.start_photo +')'}"></div> -->
            </div>
          </el-col>
          <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
            <div>
              签退
              <img class="door-img" style="width: 40%;" :src="dataform.end_photo" alt="">
              <!-- <div class="door-img" :style="{backgroundImage: 'url('+ dataform.end_photo +')'}"></div> -->
            </div>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { baseURL } from "@/config/settings";
  import appTable from "@/components/AppTable/index";
  import { getServiceList } from "@/api/oldermanager";
  import dictData from "@/utils/dictionary";
  import { tenBitTimestamp } from '@/utils'
  import axios from "axios"
  export default {
    name: "Index",
    components: { appTable },
    data() {
      return {
        url: baseURL + "serviceelder/batch/",
        activeName: "1",
        dataList: [
          {
            label: "进行中",
            status: "1",
          },
          {
            label: "已完成",
            status: "2",
          },
          {
            label: "未完成",
            status: "3",
          },
        ],
        tableColumns: [
          { prop: "id", label: "订单号" },
          { prop: "name", label: "姓名" },
          {
            prop: "sex",
            label: "性别",
            formatter: this.getSexContent,
          },
          { prop: "age", label: "年龄" },
          // { prop: "type", label: "老人类型", formatter: this.olderType },
          { prop: "address", label: "家庭地址" },
          {
            prop: "service_content",
            label: "服务内容",
            formatter: this.getServiceCon,
          },
          {
            prop: "start_time",
            label: "上门时间",
            formatter: this.getStartTime,
            width: 230
          },
          {
            prop: "end_time",
            label: "签退时间",
            formatter: this.getEndTime,
            width: 230
          },
          {
            prop: "service_time",
            label: "服务时长",
            formatter: this.getTimeDiff,
          },
        ],
        pageData: {
          type: -1
        },
        page: {
          page: 1,
          page_size: 10,
        },
        params: {
          status: 1
        },
        dialogVisible: false,
        dataform: {

        }
      };
    },
    created() {},
    beforeDestroy() {},
    mounted() {
      this.getTableData();
    },
    methods: {
      getTableData() {
        getServiceList("get", {...this.params, ...this.page}).then((resp) => {
          if (resp.code === 200) {
            this.pageData = resp.data;
            this.$set(this.pageData, "type", -1);
          }
        });
      },
      getStartTime(row, column) {
        if(row.start_time){
          return tenBitTimestamp(row.start_time)
        }
        return "未签";
      },
      handcleTime(time) {
        if(time){
          return tenBitTimestamp(time)
        }
        return "未签";
      },
      getEndTime(row, column) {
        if(row.end_time){
          return tenBitTimestamp(row.end_time)
        }
        return "未签";
      },
      getSexContent(row) {
        if(!row.sex) return
        this.getSexCon(row.sex)
      },
      getSexCon(sex) {
        if(sex == 1){
          return "男";
        }else{
          return "女";
        }
      },
      getServiceCon(row, column) {
        this.getServiceContentDetail(row.service_content);
      },
      getServiceContentDetail(content) {
        if(content) {
          let arr = [];
          const serviceArr = content.split(',');
          dictData.serviceName.map(item => {
            serviceArr.map(ite => {
              if(item.id == ite){
                arr.push(item.value)
              }
            })
          })
          return arr.join(',')
        }else{
          return "未知";
        }
      },
      getTimeDiff(row, column) {
        if(!row.end_time || !row.start_time){
          return "未知";
        }else{
          return this.getDiffTime(row.end_time, row.start_time)
        }
      },
      getDiffTime(end, start) {
        if(!start || !end) {
          return "未知";
        }
        let service_time = Math.abs(end - start) / 60 / 60;
        service_time = service_time % 1 === 0 ? service_time + "小时" : service_time.toFixed(2) + "小时"
        return service_time
      },
      assignType(row, column) {
        if (row.assign_status == 1) {
          return "已分配";
        } else {
          return "未分配";
        }
      },
      olderType(rows) {
        for (let index = 0; index < this.dictDatas.olderType.length; index++) {
          const element = this.dictDatas.olderType[index];
          if (index + 1 == rows.type) {
            return element;
          }
        }
      },
      handleCurrentChange(val) {
        this.page.page = val;
        this.getTableData();
      },
      handleCheckedRows() {

      },
      giveGift(data) {

      },
      getDetailData(row) {
        this.dialogVisible = true;
        this.dataform = row;
      },
      handleClick(tab) {
        this.params = {status: tab.name}
        this.getTableData();
      }
    },
  };
</script>
<style lang="scss" scoped>
  .service-container {
    box-sizing: border-box;
    width: 100%;
    padding: 0 40px !important;
    margin: 0 !important;
    background: #fff !important;
    .doorService-wrap{
      .el-row {
        margin-bottom: 24px;

        .el-col {
          p, div {
            font-size: 16px;
            color: #999;

            span {
              font-size: 16px;
              color: #333;
            }
            div{
              display: inline-block;
            }
          }
           .door-img{
             width: 80%;
             height: auto;
             background-repeat: no-repeat;
             background-size: cover;
             vertical-align:top;
             border-radius: 10px;
             box-sizing: border-box;
           }
        }
      }
    }
  }
</style>
